const darkAppearanceVariables = {
  colorPrimary: "hsl(0, 0%, 98%)",
  colorText: "hsl(0, 0%, 98%)",
  colorBackground: "hsl(240, 10%, 3.9%)",
  colorSecondaryText: "hsl(240, 5%, 64.9%)",
  colorBorder: "hsl(240, 3.7%, 35.9%)",
  buttonSecondaryColorBackground: "hsl(240, 3.7%, 15.9%)",
  buttonSecondaryColorText: "hsl(0, 0%, 98%)",
  actionSecondaryColorText: "hsl(0, 0%, 98%)",
  actionSecondaryTextDecorationColor: "hsl(0, 0%, 98%)",
  colorDanger: "hsl(0, 62.8%, 50%)",
  badgeNeutralColorBackground: "hsl(240, 3.7%, 15.9%)",
  badgeNeutralColorBorder: "hsl(240, 3.7%, 35.9%)",
  badgeNeutralColorText: "hsl(240, 5%, 64.9%)",
  badgeSuccessColorBackground: "hsl(120, 40%, 15%)",
  badgeSuccessColorBorder: "hsl(120, 40%, 25%)",
  badgeSuccessColorText: "hsl(120, 40%, 50%)",
  badgeWarningColorBackground: "hsl(30, 84%, 15%)",
  badgeWarningColorBorder: "hsl(30, 84%, 25%)",
  badgeWarningColorText: "hsl(30, 84%, 60%)",
  badgeDangerColorBackground: "hsl(0, 62.8%, 15%)",
  badgeDangerColorBorder: "hsl(0, 62.8%, 25%)",
  badgeDangerColorText: "hsl(0, 62.8%, 50%)",
  offsetBackgroundColor: "hsl(240, 3.7%, 15.9%)",
  formBackgroundColor: "hsl(240, 10%, 3.9%)",
  overlayBackdropColor: "rgba(0,0,0,0.8)",
} as const;

const lightAppearanceVariables = {
  colorPrimary: "hsl(240, 5.9%, 10%)",
  colorText: "hsl(240, 10%, 3.9%)",
  colorBackground: "hsl(0, 0%, 100%)",
  colorSecondaryText: "hsl(240, 3.8%, 46.1%)",
  colorBorder: "hsl(240, 5.9%, 90%)",
  buttonSecondaryColorBackground: "hsl(240, 4.8%, 95.9%)",
  buttonSecondaryColorText: "hsl(240, 5.9%, 10%)",
  actionSecondaryColorText: "hsl(240, 5.9%, 10%)",
  actionSecondaryTextDecorationColor: "hsl(240, 5.9%, 10%)",
  colorDanger: "hsl(0, 84.2%, 60.2%)",
  badgeNeutralColorBackground: "hsl(240, 4.8%, 95.9%)",
  badgeNeutralColorBorder: "hsl(240, 5.9%, 90%)",
  badgeNeutralColorText: "hsl(240, 3.8%, 46.1%)",
  badgeSuccessColorBackground: "hsl(120, 40%, 95%)",
  badgeSuccessColorBorder: "hsl(120, 40%, 85%)",
  badgeSuccessColorText: "hsl(120, 40%, 40%)",
  badgeWarningColorBackground: "hsl(30, 84%, 95%)",
  badgeWarningColorBorder: "hsl(30, 84%, 85%)",
  badgeWarningColorText: "hsl(30, 84%, 40%)",
  badgeDangerColorBackground: "hsl(0, 84.2%, 95%)",
  badgeDangerColorBorder: "hsl(0, 84.2%, 85%)",
  badgeDangerColorText: "hsl(0, 84.2%, 50%)",
  offsetBackgroundColor: "hsl(240, 4.8%, 95.9%)",
  formBackgroundColor: "hsl(0, 0%, 100%)",
  overlayBackdropColor: "rgba(0,0,0,0.5)",
} as const;


export const appearanceVariablesForTheme = (theme: string | undefined) => {
  return theme === "dark" ? darkAppearanceVariables : lightAppearanceVariables;
};
